<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16" type="flex">
      <a-col :order="isMobile ? 2 : 1" :xs="24" :md="24" :lg="12">
        <a-spin :spinning="loading">
          <a-form layout="vertical" :form="form">
            <a-form-item label="电话号码">
              <a-input v-decorator="['phone']" />
            </a-form-item>
            <a-form-item label="姓名">
              <a-input v-decorator="['name']" />
            </a-form-item>
            <!-- <a-form-item label="密码">
              <a-input v-decorator="['password']" />
            </a-form-item> -->
            <!-- <a-form-item label="性别">
              <a-select v-decorator="['sex']">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="地区">
              <a-cascader
                v-decorator="['address']"
                :options="cityArr"
                placeholder="地区"
                :fieldNames="{ label: 'name', children: 'children', value: 'name' }"
              />
            </a-form-item> -->

            <!-- cityArr -->
            <a-form-item>
              <a-button type="primary" @click="handleChnageAccount">{{ $t('account.settings.basic.update') }}</a-button>
            </a-form-item>
          </a-form>
        </a-spin>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { userUpdateSelf, dingWorkInfo } from '@/api/login'
import { baseMixin } from '@/store/app-mixin'
import { mapGetters } from 'vuex'
import { cityArr } from '@/utils/ccity'
import map from '@antv/data-set'
import { Cascader } from 'ant-design-vue'


export default {
  mixins: [baseMixin],
  components: {
    'a-cascader': Cascader,
  },
  data() {
    return {
      cityArr,
      // cropper
      form: this.$form.createForm(this),
      preview: {},
      loading:false,
      option: {
        img: '/avatar2.jpg',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
        
      },
    }
  },
  mounted() {
    let userInfo = this.userInfo
    let data = {
      phone: userInfo.phone,
      name: userInfo.name,
    }
    this.form.setFieldsValue(data)
  },
  methods: {
    setavatar(url) {
      let _j = {
        headImg:url
      }
      this.$store.dispatch('UserUpdateSelf', _j)
      .then((res) => {})
      
    },
    handleChnageAccount() {
      let arr = ['phone', 'name']
      let _j = {},
        bool = false
      arr.forEach((v) => {
        if (this.form.getFieldValue(v) != this.userInfo[v]) {
          _j[v] = this.form.getFieldValue(v)
          bool = true
        }
      })
      // let address = this.form.getFieldValue('address')
      // if(address){
      //   _j.country = address[0] || ''
      //   _j.province = address[1] || ''
      //   _j.city = address[2] || ''
      //   bool = true
      // }
      if (bool) {
        this.$store.dispatch('UserUpdateSelf', _j).then((res) => {
          this.$message.success('修改成功!')
        })
      }
    },
    
  },
  computed: {
    ...mapGetters({ 'userInfo': 'userInfo','baseUrl':'baseUrl' }),
    headImg:function(){
      let headImg = this.userInfo.headImg
      if(headImg){
        return `${this.baseUrl}/${headImg}`
      }else{
        return '/avatar2.jpg'
      }
    }
  },
}
</script>

<style lang="less" scoped>
.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
